<template>
  <div>
    <p>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </p>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name></el-tab-pane>
      <el-tab-pane label="已完成" name="over"></el-tab-pane>
      <el-tab-pane label="待支付" name="waitpay"></el-tab-pane>
    </el-tabs>
    <div v-if="!list || list.length==0">暂无订单</div>
    <div class="order-item" v-for="item in list" :key="item.order_id">
      <el-image class="house-post" :src="item.house_post" lazy></el-image>
      <div class="order-info">
        <div class="house-title">{{item.house_title}}</div>
        <div>{{Date.Transfer(item.date_from).Format('yyyy-MM-dd')}}-{{Date.Transfer(item.date_to).Format('yyyy-MM-dd')}}· {{item.nights}}晚</div>
        <div>{{item.status}}· ¥{{item.total_price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import "../util";
export default {
  name: "MyOrders",
  data() {
    return {
      activeName: "",
      list: [
        {
          house_title: "阳光大床房单人间新房特惠夏日专享",
          house_post:
            "https://z1.muscache.cn/im/pictures/160b9def-a1b3-45e1-bc66-a1807e8ab05a.jpg?aki_policy=large",
          nights: 7,
          total_price: 210,
          date_from: "2020-02-18",
          date_to: "2020-02-25",
          status: "over"
        },
        {
          house_title: "阳光大床房单人间新房特惠夏日专享",
          house_post:
            "https://z1.muscache.cn/im/pictures/160b9def-a1b3-45e1-bc66-a1807e8ab05a.jpg?aki_policy=large",
          nights: 7,
          total_price: 210,
          date_from: "2020-02-18",
          date_to: "2020-02-25",
          status: "over"
        }
      ]
    };
  },
  created() {
    this.getOrders();
  },
  methods: {
    handleClick(tab, event) {
      this.getOrders(this.activeName);
    },
    getOrders(type) {
      const _this = this;
      const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
      this.$axios
        .get("/order/getOrders", {
          params: {
            status: type,
            user_id: userInfo.user_id
          }
        })
        .then(function(res) {
          if (res.status == 200) {
            _this.list = res.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.order-item {
  width: 48%;
  float: left;
  height: 400px;
  overflow: hidden;
  background: #eee;
  margin-right: 2%;
  margin-bottom: 20px;
  cursor: pointer;
}

.order-info {
  padding: 10px 15px;
}

.house-post {
  width: 100%;
  height: 300px;
}

.house-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
